<template>
<!-- 构建制品 -->
  <div class="build-root">
    <a-form ref="formRef" class="build-form" :rules="state.rules" :model="state.moduleBuild">
      <a-form-item label="分支名称 :" name="branch">
        <a-input
          class="inputbox"
          placeholder="请输入分支"
          v-model:value="state.moduleBuild.branch"
        />
      </a-form-item>
      <a-form-item label="Pipeline :" name="pipelineName">
        <a-select
          placeholder="请输入基础镜像"
          v-model:value="state.moduleBuild.pipelineName"
          class="inputbox"
        >
          <a-select-option value="java_8" v-if="module.type === 'exec_jar'">java_8</a-select-option>
          <a-select-option value="java_11" v-if="module.type === 'exec_jar'">java_11</a-select-option>
          <a-select-option value="java_deploy_8" v-if="module.type === 'deploy_jar'">java_deploy_8</a-select-option>
          <a-select-option value="java_deploy_11" v-if="module.type === 'deploy_jar'">java_deploy_11</a-select-option>
          <a-select-option value="static_js_14" v-if="module.type === 'static'">static_js_14</a-select-option>
        </a-select>
      </a-form-item>
      <!--
      <a-form-item label="发布类型 :" name="commandParam"  v-if="module.type === 'deploy_jar'">
          
         <a-select
          placeholder="请输入基础镜像"
          v-model:value="state.moduleBuild.commandParam"
          class="inputbox"
          :options="state.deployCommond"
        />
      </a-form-item>
        -->
      <a-form-item label="命令行参数 :">
        <a-input class="inputbox" v-model:value="state.moduleBuild.commandParam" />
      </a-form-item>
      <div style="display: flex; align-items: center">
        <a-button
          type="primary"
          style="margin-left: 20px;line-height: 26px;"
          :disabled="state.showLoading"
          :loading="state.showLoading"
          @click="build"
          >构建</a-button
        >
        <a-button
          v-if="state.moduleBuild.id && state.moduleBuild.buildNum!==0"
          type="primary"
          style="margin-left: 20px;line-height: 26px;"
          @click="showLog"
          >显示日志</a-button
        >
      </div>
    </a-form>
  </div>
</template>



<script lang="ts">
import { defineComponent, reactive, toRefs, watch, ref, onBeforeUnmount, onMounted, PropType } from "vue";
import { moduleBuildApi } from "@/api/devcloudApi";
import type { FormInstance } from 'ant-design-vue';
import { logIsEndStatus } from "@/util/devcloudUtils";

export default defineComponent({
  name: "build",
  props: {
    moduleBuild: {
      type: Object,
      required: true,
    },
    module: {
      type: Object,
      required: false,
    },
  },
  components: {},
  setup(props, ctx) {
    const formRef = ref<FormInstance>();
    const moduleBuild:any = ref(props.moduleBuild)

    const cloneBuildInfo = (newBuild: any) => {
      const cloneObj = {
        id: newBuild.id,
        branch: newBuild.branch,
        commandParam: newBuild.commandParam ? newBuild.commandParam : "",
        pipelineName: newBuild.pipelineName,
        moduleId: newBuild.moduleId,
        buildNum: newBuild.buildNum,
        result: newBuild.result
      }
      state.moduleBuild = cloneObj;
    }

    const state = reactive({
      logTrack: true,
      logVisible: false,
      moduleBuild: {
        id: '',
        branch: '',
        result: '',
      },
      logs: "start build ......\r\n",
      showLoading: false,
      rules: {
        branch: [
          { required: true, validateTrigger: "onBlur", message:"请填写分支信息"},
        ],
        pipelineName: [
          { required: true, message:"请选择脚本"},
        ],
        commandParam: [
          { required: true, message:"请选择发布类型"},
        ],
      },
      deployCommond:[
        {
          label:"snapshot",
          value: "-DaltDeploymentRepository=snapshot::default::http://nexus.msh.com/repository/maven-snapshots/"
        },
        {
          label:"release",
          value: "-DaltDeploymentRepository=release::default::http://nexus.msh.com/repository/maven-releases/"
        },
      ]
    });

    const build = () => {
      formRef.value?.validateFields().then(async () =>{
        const res = await moduleBuildApi.build(state.moduleBuild);
        if (res.success) {
          ctx.emit("buildSucess", res.result);
          state.moduleBuild = res.result;
          ctx.emit("addMonitorLog", state.moduleBuild.id, true);
          state.showLoading = true;
        }
      }).catch(e=>{
      })
    }

    const logEnd = (buildId:string, result:string)=>{
      if(state.moduleBuild.id === buildId){
        state.showLoading = false
        state.moduleBuild.result = result
      }
    }

    const showLog = () => {
      if(logIsEndStatus(state.moduleBuild.result)){
        ctx.emit("addDetailLog", state.moduleBuild.id);
      }else{
        ctx.emit("addMonitorLog", state.moduleBuild.id, true);
      }
    }


    const loadLog = () => {
      if(!state.moduleBuild.id){
        return
      }
      if(!logIsEndStatus(state.moduleBuild.result)){
        state.showLoading = true;
        ctx.emit("addMonitorLog", state.moduleBuild.id, false);
      }
    }


    cloneBuildInfo(moduleBuild.value);

    onMounted(() => {
      loadLog()
    })

    return {
      state,
      formRef,
      build,
      showLog,
      loadLog,
      logEnd
    }
  },
});
</script>

<style lang="less" scoped>
.build-root {
  margin: 20px 40px;
  border:1px solid #ddd;
  padding: 40px 40px;
  box-shadow: rgba(0, 0, 0, 0.2) 1px 3px 8px;

  .build-form {
    width: 70%;
    margin-bottom: 20px;
    line-height: 40px;
  }
  :deep(.ant-form-item-label > label) {
    width: 86px;
  }

  .ant-collapse-content-box {
    height: 65vh;
  }
}


pre {
    background: rgba(0, 0, 0, .8);
    color: #fff;
    padding: 15px 10px;
    font-size: 12px;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    *white-space: normal !important;
    height: 80vh !important;
    overflow: hidden;
    overflow-y: scroll;
    margin-top: 10px;
}
</style>
<style lang="less" >
.build-root .ant-collapse-content-box {
  height: 65vh;
}
</style>